<template>
  <div id="zhangdan">
    <!-- <mt-header title="账单"> </mt-header> -->
    <van-sticky>
      <van-search
        v-model="searchs.keywords"
        show-action
        placeholder="请输入搜索关键词"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <div ref="container" class="content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <van-card
          v-for="detail in data.items"
          v-bind:key="detail.id"
          :tag="detail.classified"
          :price="detail.price"
          :desc="detail.desc"
          :title="detail.name"
          :thumb="$api.baseURL['api1'] + 'file/files?id=' + detail.fileId"
          :origin-price="detail.originPrice"
        >
          <template #tags>
            <van-rate v-model="detail.rate" readonly />
          </template>
          <template #footer>
            {{ detail.date }}
            <van-button
              size="mini"
              @click="$router.push('/zhangdan_edit/' + detail.id)"
              >修改</van-button
            >
            <van-button size="mini" @click="deleteData(detail.id)"
              >删除</van-button
            >
          </template>
        </van-card>
      </van-list>
    </div>

    <van-button
      class="pb"
      :round="true"
      icon="plus"
      type="warning"
      @click="$router.push('/zhangdan_edit/null')"
    />
  </div>
</template>
<script>
export default {
  name: "ZhangDan",
  components: {},
  data() {
    return {
      container: "container",
      searchs: {
        keywords: "",
        skipCount: 0,
        maxResultCount: 10,
      },
      loading: false,
      finished: false,
      data: {
        totalCount: 0,
        items: [],
      },
    };
  },
  methods: {
    updateData(item) {
      console.log(item);
    },
    deleteData(id) {
      this.$api.delete("api1", `app/zhang-dan/${id}`, null, (r) => {
        this.onSearch();
      });
    },
    onSearch() {
      this.finished = false;
      this.loading = true;
      this.searchs.skipCount = 0;
      this.data = {
        totalCount: 0,
        items: [],
      };
      this.onLoad();
    },
    onLoad() {
      // console.log("请求=" + this.searchs.keywords);
      this.$api.get(
        "api1",
        `app/zhang-dan/page-list?skipCount=${this.searchs.skipCount}&maxResultCount=${this.searchs.maxResultCount}&keyWords=${this.searchs.keywords}`,
        null,
        (r) => {
          this.data.totalCount = r.totalCount;
          r.items.forEach((element) => {
            this.data.items.push(element);
          });
          // console.log(this.data);
          this.searchs.skipCount =
            this.searchs.skipCount + this.searchs.maxResultCount + 1;
          this.loading = false;
          if (r.totalCount <= this.searchs.skipCount) this.finished = true;
        }
      );
    },
    onCancel() {},
  },
  mounted() {
    // this.onSearch();
  },
};
</script>

<style lang="stylus" scoped>
#zhangdan {
  .pb {
    color: #fff;
    position: fixed;
    bottom: 75px;
    right: 15px;
  }
}
</style>
